import { DatePicker, Input, Select, Table, Typography } from "antd"
import { Public } from ".."
import './index.less'
import { Link,Outlet } from "@/.umi/exports";
const { Text } = Typography;
const { RangePicker } = DatePicker;
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const columns = [
    {
        title: '编码',
        dataIndex: 'name',
        key: 'name',
        render: (text: string) => <Link to="etc2">{text}</Link>,
    },
    {
        title: '账户名称',
        dataIndex: 'name',
        key: 'name',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: '摘要',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '收支类别',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '往来单位',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '结算方式',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '付款金额',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '备注',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '制单人',
        dataIndex: 'address',
        key: 'address',
    },
];

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },]
const Collection=()=>{
    return (
        <div>
            <Public header="收款记录"></Public>
            {/* 搜索操作 */}
            <div className="from">
                <span className='name'>日期:</span><RangePicker />
                <span className='name'>收支类别:</span><Select
                    defaultValue="其他收入"
                    style={{ width: 140 }}
                    onChange={handleChange}
                    options={[
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                    ]}
                />
                <span className='name'>结算方式:</span><Select
                    defaultValue="支票"
                    style={{ width: 140 }}
                    onChange={handleChange}
                    options={[
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                    ]}
                />
                <div className="input">
                    <span>金额：</span><input className="input1"></input>至<input className="input2"></input>
                </div>
                <Input placeholder="摘要/备注/票据号/往来单位" className="input3" />
                <button type="button">搜索</button>
                <button type="button">导出</button>
            </div>
            {/* 表格 */}
            <Table columns={columns} dataSource={data} style={{ width: '98%', margin: 'auto' }} summary={(data) => {
                    let ages = 0;
                    data.forEach(({age}) => {
                        if (age != null) {
                            ages += age
                        }

                    })
                    return (<>
                        <Table.Summary.Row>
                            <Table.Summary.Cell colSpan={5} index={0} className="total-cell">总计:</Table.Summary.Cell>
                            <Table.Summary.Cell index={1} />
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{ages}</Text>
                            </Table.Summary.Cell>
                        </Table.Summary.Row>
                    </>

                    )
                }}/>;
                <Outlet/>
        </div>
    )
}
export default Collection